<style scoped>
.main {
    display: flex;
    flex-direction: row;
    width: 100%;
    flex-wrap: wrap;
}
.product {
    width: 20.5%;
    height: 340px;
    margin: 2%;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 2px dotted rgb(145, 148, 141);
    justify-content: space-between;
}
.product img{
    margin: 15px;
}
</style>

<template>
    <div>
        <div class="main">
            <div class="product" v-for="(item,index) in items" :key="index" @click="toItems(item.itemid)">
                <img :src="item.attr5" alt="" width="80%" height="250px">
                <div> itemid:{{item.itemid}}</div>
                <div> lastprice:{{item.listprice}}</div>
                <div> attribute:{{item.attr1}}</div>
            </div>
        </div>
    </div>
</template>

<script>
import router from '@/router';

export default {
    name: "Productmodule",
    props: {
        catid: [String]
    },
    data() {
        return {items: []}
    },
    mounted() {
        if (this.$route.query.id != null){
            this.changeItems(this.$route.query.id);
        }
        else{
            this.$Axios({
                method: 'get',
                url: '/catalog/items',
                params: {
                    category: this.catid
                }
            }).then(res=>{
                this.items = res.data.data
            }).catch(error=> {
                this.$message.error("其他服务器错误"+error);
            })            
        }

    },
    methods: {
        changeItems(id){
            this.$Axios({
                method: 'get',
                url: '/catalog/product-items',
                params:{
                    productid: id
                }
            }).then(res=>{
                this.items = res.data.data;
            }).catch(error=>{
                this.$message.error("其他服务器错误"+error);
            })
        },
        toItems(itemid) {
            let path = '/item/' + itemid;
            router.push(path);
        }
    }
}
</script>

